<template>
	<view>
		<!-- 弹出层 -->
		<view class="find_sidebar">
				<u-popup v-model="show" width="600rpx" border-radius="20">			
					<view class="sidebar_my" @click="tomycore1">
						<!-- 头像 -->
						<image :src="simy" mode="" class="sidebar_my_image1"></image>
						<!-- 网名 -->
						<text>{{simy_name}}</text>
						<!-- 详情箭头 -->
						<image src="../../static/jiantou.png" mode="" class="sidebar_my_image2"></image>
						<!-- 扫一扫 -->
						<image src="../../static/sidebar/saoyisao.png" mode="" class="sidebar_my_image3"></image>
				    </view>
					<Sidebar></Sidebar>
					
				</u-popup>
				<image src="../../static/sidebar/hanbaobao.png" mode="" @click="show=true"></image>
			</view>
	   <!-- 顶部搜索栏 -->
		<search ></search>
		<!-- 轮播和导航 -->
		<lunboNav></lunboNav>
		<!-- 推荐歌单模式 -->
		<rec></rec>
		<!-- 推荐电台 -->
		<ra></ra>
	</view>
</template>

<script>
	import search from '../../components/find/search.vue';
	import lunboNav from '../../components/find/lunbo-nav.vue';
	import rec from '../../components/find/Recommended-song.vue';
	import ra from '../../components/find/radio.vue';
	import Sidebar from '../../components/find/sidebar.vue'
	export default {
		data() {
			return {
				show:false,
				simy:[],
				simy_name:[]
				
			}
		},
		onShow() {
			this.myuser = uni.getStorageSync('setUser');
			this.getsimy(this.myuser)
			this.getName(this.myuser)
		},
		methods: {
			getsimy(myuser) {
				uni.request({
					url: 'http://localhost:3000/user/detail',
					data: {
						uid: myuser
					},
					method: 'GET',
					success: (res) => {
						this.simy = res.data.profile.avatarUrl
					}
			
				})
			},
			getName(myuser) {
				uni.request({
					url: 'http://localhost:3000/user/detail',
					data: {
						uid: myuser
					},
					method: 'GET',
					success: (res) => {
						this.simy_name = res.data.profile.nickname
					}
			
				})
			},
			tomycore1(){
				uni.navigateTo({
					url:'../my/mycore/mycore'
				})
			}
		},
		components: {
				search, //注册子组件
				lunboNav,
				rec,
				ra,
				Sidebar
			}
	}
</script>

<style lang="scss">
	
	//页面背景
  page{
	  background-image: linear-gradient(#e7eff2, #f5f5f5);
  }
  //弹出层
  .find_sidebar{
	 width: 50;
	  position: relative;
	  top:60rpx;
	  left:14rpx;
	  image{
		  width:50rpx;
		  height:50rpx;
		 
	  }
  }
 
  // 个人信息
  .sidebar_my {
  	width: 560rpx;
  	height: 80rpx;
  	margin-top: 40rpx;
  	margin-left: 20rpx;
  	position: relative;
  
  	// margin-right: 20rpx;
  	.sidebar_my_image1 {
  		width: 50rpx;
  		height: 50rpx;
  		border-radius: 50%;
  		position: absolute;
  		top: 10rpx;
  	}
	text{
		position: absolute;
		left:70rpx;
		top:18rpx;
		font-weight: 600;
		font-family: '微软雅黑 Light';
		color: #303133;
	}
	.sidebar_my_image2{
		width: 40rpx;
		height:40rpx;
		position: absolute;
		top:16rpx;
		left:175rpx;
	}
	.sidebar_my_image3{
		position: absolute;
		top:16rpx;
		right:16rpx;
	}
  }
</style>
